<template>
  <div class="foSi14" style="padding: 20px;">
    <div
      v-for="(item, index) in list"
      :key="index"
      v-loading="loading"
      class="item mar-bott20"
      style="background: #f2f2f2"
    >
      <div class="row hei40 dis disAl">
        <span class="mar-right10">[团课]</span>
        <span>{{ item.name }}</span>
      </div>
      <div
        v-for="(item2, index2) in item.classfee"
        style="display: flex;font-size: 15px;width: 50%;justify-content: space-between;background: #f2f2f2;margin: 10px 10px 10px 30px"
      >
        <div>教练姓名：{{ item2.name }}</div>
        <div>课时费(元/节)：{{ item2.money }}</div>
        <div style="display: flex;cursor: pointer">
          <div @click.stop="operclassfee('edit', index, index2)"><i
            class="el-icon-edit"
            style="color: #6b7cdd;"
          />编辑</div>
          <div style="margin-left: 20px;" @click.stop="operclassfee('del',index,index2)"><i
            class="el-icon-delete"
            style="color: #6b7cdd;"
          />删除</div>
        </div>
      </div>
      <div class="row hei40 dis disAl cuPo" style="color: #6b7cdd;" @click.stop="listClick(item)">
        <i class="el-icon-circle-plus-outline" />
        <span>新增老师课时费配置</span>
      </div>
    </div>
    <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    <div v-if="shuaVisible" class="zhezhao wh100" />
    <div v-if="shuaVisible" v-loading="loading" class="zhezhaoN dis disAl disJuC wh100">
      <div class="poRel borRad10 bacFFF" style="width: 762px;">
        <div class="wid90 mar">
          <div class="wid100 dis disAl disJuB" style="padding: 30px 0 10px;">
            <div class="dis disAl">
              <div class="foSi20 fowe600 mar-right10">新增老师课时费配置</div>
            </div>
            <svg-icon
              icon-class="guanbi"
              class="mar0 cuPo"
              style="color: #ACACAC;width: 24px;height: 24px;"
              @click.stop="shuaVisibleClick()"
            />
          </div>
          <div class="" style="padding: 20px 0;">
            <div class="dis disAl mar-bott10 hei44" style="padding: 5px 15px;background: #f2f2f2;">
              <span class="mar-right10">[团课]</span>
              <span>{{ kcName.name }}</span>
            </div>
            <el-form ref="ruleForm" :model="ruleForm" :rules="rules">
              <div class="dis disAl disJuB">
                <div class="dis disAl disJuB hei44 itFor">
                  <div>
                    <span class="foSi10" style="color: #ff0000;margin-right: 4px;">*</span>
                    <span>老师姓名</span>
                  </div>
                  <el-form-item class="mp0" prop="name">
                    <el-select v-model="ruleForm.coach_id" style="width: 140px;height: 34px;">
                      <el-option
                        v-for="(item,index) in coachlist"
                        :key="index"
                        :label="item.name"
                        :value="item.id"
                      />
                    </el-select>
                  </el-form-item>
                </div>
                <div class="dis disAl disJuB hei44 itFor">
                  <div>
                    <span class="foSi10" style="color: #ff0000;margin-right: 4px;">*</span>
                    <span>课时费（元/节）</span>
                  </div>
                  <el-form-item class="mp0" prop="money">
                    <el-input
                      v-model.number="ruleForm.money"
                      type="number"
                      placeholder="请输入老师课时费"
                      class="mar0 kcTime"
                    />
                  </el-form-item>
                </div>
              </div>
            </el-form>
          </div>
          <div class="wid100 dis disAl disJuC foSi14 coFFF" style="padding: 20px 0 40px">
            <div
              class="mar-right20 que cuPo"
              @click.stop="submitForm('ruleForm')"
            >确认</div>
            <div class="que cuPo" style="background: #616b74;" @click.stop="shuaVisibleClick()">取消</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import {
  getcourseList,
  SchedClassfeeAddEdit,
  SchedClassfeeDel
} from '@/api/coures'
import {
  getXuan,
  judgeButton
} from '@/utils/limits.js'
import {
  mapGetters
} from 'vuex'
import {
  getbrandinfo2
} from '@/api/brand'
import {
  getVenue
} from '@/api/venue'
export default {
  name: 'CoachFee',
  components: {
    Pagination
  },
  data() {
    return {
      shuaVisible: false,
      list: null,
      total: 0,
      loading: false,
      listQuery: {
        page: 1,
        limit: 10
      },
      kcName: null,
      nameList: [{
        value: 1,
        label: '罗慧'
      }],
      ruleForm: {
        id: '',
        course_id: '', // 课程ID
        coach_id: '', // 教练ID
        money: null // 金额
      },
      rules: {
        id: [{
          required: true,
          message: '请选择老师',
          trigger: 'change'
        }],
        money: [{
          required: true,
          message: '请输入0~9999.99内的数值',
          trigger: 'blur'
        }]
      },
      coachlist: [] // 教练列表

    }
  },
  computed: {
    ...mapGetters([
      'permission_routes',
      'roles'
    ])
  },
  created() {
    var xuanList = [{
      name: '团课课时费设置',
      url: '/course/coachFee',
      pd: true
    }, {
      name: '精品课课时费设置',
      url: '/course/coachFeeForQuality',
      pd: true
    }, {
      name: '私教课课时费设置',
      url: '/course/coachFeePersonalTrainers',
      pd: true
    }]
    var xuanList1 = getXuan(xuanList, this.roles)
    this.$store.dispatch('user/changeXuan', {
      key: 'xuanList',
      value: xuanList1
    })
    this.$store.dispatch('user/changeXuan', {
      key: 'xuan',
      value: 0
    })
    this.getList()
    this.search_coach()
  },
  methods: {
    operclassfee(oper, index, index2) {
      var item = this.list[index].classfee[index2]
      if (oper === 'edit') {
        // 编辑
        this.kcName = this.list[index]
        var edit_item = this.list[index].classfee[index2]
        console.log(edit_item)
        Object.keys(this.ruleForm).forEach((key) => {
          this.ruleForm[key] = edit_item[key]
        })
        this.shuaVisible = true
      } else if (oper === 'del') {
        // 删除
        this.$confirm('删除课时费配置信息后，课表中已经排课未开始的课程课时费信息将被清0，会影响课时费统计，请谨慎操作', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var data = {
            id: item.id
          }
          this.loading = true
          SchedClassfeeDel(data).then(response => {
            const {
              data
            } = response
            this.loading = false
            this.shuaVisible = false
            this.getList()
          }).catch(error => {
            console.log(error)
            this.loading = false
          })
        }).catch(() => {})
      } else {
        this.$message({
          type: 'success',
          message: '未知操作!'
        })
      }
    },
    search_coach() {
      getVenue({
        keyword: '',
        type: 1
      }).then(response => {
        const {
          data
        } = response
        this.loading = false
        console.log('获取教练列表', data)
        this.coachlist = data
      }).catch(error => {
        console.log(error)
        this.loading = false
      })
    },
    submitForm(formName) {
      var data = this.ruleForm
      this.loading = true
      this.$refs[formName].validate((valid) => {
        if (valid) {
          SchedClassfeeAddEdit(data).then(response => {
            const {
              data
            } = response
            this.loading = false
            this.shuaVisible = false
            this.getList()
          }).catch(error => {
            console.log(error)
            this.loading = false
          })
        } else {
          this.$message.error('请按规则填写完整信息')
          return false
        }
      })
    },
    shuaVisibleClick() {
      this.shuaVisible = false
      // this.ruleForm = {
      //   name: null,
      //   money: null
      // }
    },
    listClick(item) {
      this.kcName = item
      this.shuaVisible = true
      this.ruleForm = {
        id: '',
        course_id: item.id, // 课程ID
        coach_id: '', // 教练ID
        money: null // 金额
      }
      console.log(this.ruleForm)
    },
    getList() {
      this.loading = true
      getcourseList({
        page: this.listQuery.page,
        limit: this.listQuery.limit,
        type: 1
      }).then(response => {
        const {
          data
        } = response
        this.loading = false
        this.list = data.data
        this.total = data.total
        this.listQuery.page = data.current_page
        console.log('获取课程列表', data)
      }).catch(error => {
        console.log(error)
        this.loading = false
      })
      // this.list = [
      //   {
      //     name: '阿努萨拉'
      //   }, {
      //     name: '动感燃脂'
      //   }, {
      //     name: '形体密码'
      //   }, {
      //     name: '核心稳定'
      //   }, {
      //     name: '入门瑜伽'
      //   }
      // ]
      this.total = 1
      this.listLoading = false
    }
  }
}
</script>

<style lang="scss" scoped>
	.item {
		border: 1px solid #d9d9d9;
	}

	.row {
		margin-bottom: 1px;
		padding-left: 30px;
		background: #f2f2f2;
	}

	.itFor {
		width: 49.5%;
		background: #f2f2f2;
		padding: 0 10px;
	}

	.que {
		display: inline-block;
		padding: 0 24px;
		height: 34px;
		line-height: 34px;
		text-align: center;
		vertical-align: top;
	}

	.kcTime {
		width: 140px;
		height: 34px;
	}

	::v-deep .el-input__inner {
		height: 34px;
		line-height: 34px;
		padding: 0 10px;
	}
</style>
